<template>
  <div class="books">
    <h2>{{ typeObj[title] }}</h2>
    <ul class="booksul">
      <li v-for="books1 in book" :key="books1.id">
        <router-link v-bind:to="'/Details/'+books1.id">
          <img :src="'../assets/img/' + books1.url" alt="" class="imgleft" />
          </router-link>
        <p>
          <span>{{ books1.name }}</span>
          <span>{{ books1.author }}</span>
          <span>{{ books1.douban }}</span>
          <span>
            <b>{{ books1.price }}</b>
            <b>3.7折</b>
          </span>
        </p>
        <img :src="'../assets/img/' + books1.img" alt="" class="imgright" />
      </li>
      </ul>
    <h3>再多来点儿</h3>
  </div>
</template>
<script>
export default {
  name: "Books",
  props: {
    title: String,
  },
  data() {
    return {
      typeObj: {
        t1: "猜你喜欢",
        t2: "绘画技法",
        t3: "世界历史",
      },
      book: [],
    };
  },
  created() {
    let xhr = new XMLHttpRequest();
    xhr.open("get", "http://localhost:3000/book?title=" + this.title, true);
    xhr.onreadystatechange = () => {
      if (xhr.readyState == 4 && xhr.status == 200) {
        this.book = JSON.parse(xhr.responseText);
      }
    };
    xhr.send();
  },
};
</script>
<style scoped>
.books {
  height: 5.4rem;
}
.books h2 {
  height: 0.5rem;
  line-height: 0.5rem;
  font-size: 24px;
  font-weight: 700;
  padding-left: 0.1rem;
  border: none;
}
.books .booksul li p {
  width: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.books .booksul li p span:nth-child(1) {
  font-size: 20px;
}
.books .booksul li p span:nth-child(2) {
  font-size: 14px;
  color: #999;
}
.books .booksul li p span:nth-child(3) {
  font-size: 14px;
  color: rgb(245, 199, 115);
}
.books .booksul li p span:nth-child(4) {
  margin-top: 0.3rem;
  font-size: 16px;
  font-weight: 700;
}
.books .booksul li p b:nth-child(2) {
  display: inline-block;
  widows: 0.3rem;
  height: 0.2rem;
  line-height: 0.2rem;
  font-size: 14px;
  color: red;
  border: 0.01rem solid red;
  margin: 0 0.05rem;
}
.books .booksul li {
  display: flex;
  justify-content: space-around;
}
.imgleft {
  width: 0.9rem;
  height: 1.3rem;
}
.imgright {
  width: 0.5rem;
  height: 0.5rem;
}

.books h3 {
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  font-weight: 700;
  border-top: 1px solid #999;
}
</style>